<template>
  <!-- 专车筛选 -->
  <div>
    <van-popup v-model="isShow" position="right" @click-overlay="close" :style="{ width: '80%',height: '100%'}">
      <div class="top">
        <header>筛选</header>
      </div>
      <div class="content">
        <div class="content-text">
          <el-form label-position="top" label-width="80px" :model="formLabelAlign" size="mini">
            <el-form-item label="申请日期">
              <el-button type="primary" round plain @click="handleStartDate">{{formLabelAlign.startDate.length === 4 ? '开始日期':formLabelAlign.startDate}}</el-button>
              <span style="padding: 0 2.778vw">~</span>
              <el-button type="warning" round plain @click="handleEndDate">{{formLabelAlign.endDate.length === 4 ? '结束日期':formLabelAlign.endDate}}</el-button>
            </el-form-item>
            <el-form-item label="审批日期">
              <el-button type="primary" round plain @click="handleApplyStart">{{formLabelAlign.applyStart.length === 4 ? '开始日期':formLabelAlign.applyStart}}</el-button>
              <span style="padding: 0 2.778vw">~</span>
              <el-button type="warning" round plain @click="handleApplyEnd">{{formLabelAlign.applyEnd.length === 4 ? '结束日期':formLabelAlign.applyEnd}}</el-button>
            </el-form-item>
            <el-form-item label="申请批次">
              <el-input v-model="formLabelAlign.shipmentNum"></el-input>
            </el-form-item>
            <el-form-item label="始发站">
              <el-input v-model="formLabelAlign.start"></el-input>
            </el-form-item>
            <el-form-item label="目的站">
              <el-input v-model="formLabelAlign.target"></el-input>
            </el-form-item>
            <el-form-item label="承运人">
              <template slot="label">
                <label class="padding-right">承运人</label>
                <van-icon :class="carrierJiantou" :badge="formLabelAlign.carrier.length === 0 ? '':formLabelAlign.carrier.length" @click="handleShow" />
              </template>
              <mu-expand-transition>
                <div v-show="showChecked">
                  <el-checkbox-group v-model="formLabelAlign.carrier" size="mini">
                    <el-checkbox-button v-for="(item,index) in carrier" :label="item" :key="index">{{item}}</el-checkbox-button>
                  </el-checkbox-group>
                </div>
              </mu-expand-transition>
            </el-form-item>
            <el-form-item label="申请单位">
              <el-input v-model="formLabelAlign.danwei"></el-input>
            </el-form-item>
            <el-form-item label="审批状态">
              <template slot="label">
                <label class="padding-right">审批状态</label>
                <van-icon :class="stateJiantou" :badge="formLabelAlign.state.length === 0 ? '':formLabelAlign.state.length" @click="handleStateShow" />
              </template>
              <mu-expand-transition>
                <div v-show="showState">
                  <el-checkbox-group v-model="formLabelAlign.state" size="mini">
                    <el-checkbox-button v-for="(item,index) in state" :label="item" :key="index">{{item}}</el-checkbox-button>
                  </el-checkbox-group>
                </div>
              </mu-expand-transition>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="bottom">
        <div>
          <el-button plain @click="close">重置</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
    </van-popup>
    <!-- 日期选择器 -->
    <div class="time" v-if="dateShow">
      <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          @confirm="confirm"
          @cancel="cancel"
      />
    </div>
  </div>
</template>

<script>
import { format } from "@/assets/js/common"
export default {
  // 组件属性、变量
  props: {
    show: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  // 变量
  data() {
    return {
      dateShow: false,
      currentDate: new Date(),
      formLabelAlign: {
        startDate: '开始日期',
        endDate: '结束日期',
        applyStart: '开始日期',
        applyEnd: '结束日期',
        start: '',
        target: '',
        danwei: '',
        carrier: [],
        state: []
      },
      timeTile: '', // 当前选择日期的名字
      carrier: ['LMF','ABENH','BDEXH','NFHK','AA','AAA','KLE','LMEA'],
      state: ['待审批','已通过','已拒绝'],
      showChecked: false,
      carrierJiantou: 'el-icon-arrow-right',
      stateJiantou: 'el-icon-arrow-right',
      showState: false
    }
  },
  computed: {
    isShow: {
      get () {
        return this.show
      },
      set () {}
    }
  },
  // 方法
  methods: {
    // 关闭
    close() {
      this.$emit('handleClose')
    },
    cancel() {
      this.dateShow = false
    },
    confirm() {
      switch (this.timeTile) {
        case '申请开始日期':
          this.formLabelAlign.startDate = format(this.currentDate)
          break;
        case '申请结束日期':
          this.formLabelAlign.endDate = format(this.currentDate)
          break;
        case '审批开始日期':
          this.formLabelAlign.applyStart = format(this.currentDate)
          break;
        case '审批结束日期':
          this.formLabelAlign.applyEnd = format(this.currentDate)
          break;
      }
      this.dateShow = false
    },
    handleStartDate() {
      this.dateShow = true
      this.timeTile = '申请开始日期'
      if (this.formLabelAlign.startDate !== '开始日期') {
        this.currentDate = new Date(this.formLabelAlign.startDate)
      } else {
        this.currentDate = new Date()
      }
    },
    handleEndDate() {
      this.dateShow = true
      this.timeTile = '申请结束日期'
      if (this.formLabelAlign.endDate !== '结束日期') {
        this.currentDate = new Date(this.formLabelAlign.endDate)
      } else {
        this.currentDate = new Date()
      }
    },
    handleApplyStart() {
      this.dateShow = true
      this.timeTile = '审批开始日期'
      if (this.formLabelAlign.applyStart !== '开始日期') {
        this.currentDate = new Date(this.formLabelAlign.applyStart)
      } else {
        this.currentDate = new Date()
      }
    },
    handleApplyEnd() {
      this.dateShow = true
      this.timeTile = '审批结束日期'
      if (this.formLabelAlign.applyEnd !== '结束日期') {
        this.currentDate = new Date(this.formLabelAlign.applyEnd)
      } else {
        this.currentDate = new Date()
      }
    },
    handleShow() {
      this.showChecked = !this.showChecked
      if (this.showChecked) {
        this.carrierJiantou = 'el-icon-arrow-down'
      }
      else {
        this.carrierJiantou = 'el-icon-arrow-right'
      }
    },
    handleStateShow() {
      this.showState = !this.showState
      if (this.showState) {
        this.stateJiantou = 'el-icon-arrow-down'
      }
      else {
        this.stateJiantou = 'el-icon-arrow-right'
      }
    }
  },
  // 生命周期函数
  created() {
  }
}
</script>

<style scoped src="@/assets/css/transport/choose.css">

</style>
